作者：小女人hoffix_523 | 来源：互联网 | 2023-09-24 11:59
篇首语：本文由编程笔记#小编为大家整理，主要介绍了WEB前端，初识vue.js相关的知识，希望对你有一定的参考价值。
WEB前端&＃xff0c;初识vue.js
一&＃xff0c;vue知识点
vue.js 是一个以数据处理为核心的前端框架&＃xff0c;具有高效的数据绑定和灵活的组件应用的特性 ( 模块化&＃xff0c;组件 .vue)
模式1&＃xff1a;MVVM&＃xff08;vue.js&＃xff09;
M &＃xff1a;model 数据层
V: view 视图层(html&＃43;css)
VM&＃xff1a;viewModel 薄片层:是链接数据层和视图层的薄片层&＃xff08;vue的实例 &＃xff09;
模式2&＃xff1a;MVC
M:model 数据层
V:view 视图层&＃xff08;html&＃43;css&＃xff09;
C&＃xff1a;controller控制层&＃xff08;js代码&＃xff09;
二&＃xff0c;vue实例化
基础模板
<body>
<div id&＃61;"app">
msg
<button v-on:click&＃61;"show()">点击</button>
<div :class&＃61;"color" &＃64;click&＃61;"show()">show方法展示</div>
</div>
</body>
<script>
var a&＃61; new Vue(
el:"#app",
data:
msg:"hello ",
,
methods:
show()
alert("hi");
,
,
computed:,
filters:,
);
</script>
基本指令使用
v-model&＃xff1a;双向绑定 可作用与input中value使用
v-if&＃xff1a;控制css属性的消失隐藏
v-else&＃xff1a;扩展是v-else-if
v-show:通过控制样式属性display的值来显示隐藏元素
v-for&＃xff1a;遍历和迭代
v-text&＃xff1a;可以简写为,并且支持逻辑运算
v-html: 用于输出html
语法糖
v-on:click(事件)&＃61;"show()" 事件绑定——>&＃64;click&＃61;"show()"
v-bind 动态绑定 url class style href ... ——>:class&＃61;""
京公网安备 11010802041100号